<template>
  <footer id="footer">
    <div class="container">
      <div class="footer_img">
        <a v-for="item in footerList" :href="item.url" target="_blank" v-show="item.isShow">
          <el-image :src="item.icon" :alt="item.altName" lazy class="icon" />
        </a>
      </div>
      <p>&copy;2014-2023 欢迎来到{{ProjectName}}的网站！</p>
      <p class="friend">友情链接：
        <a href="http://front.sunnyfanfan.com/#/" target="_blank">读书的鱼之前端技巧</a>
        <a href="http://cixian.sunnyfanfan.com/#/" target="_blank">磁县-杂货铺</a>
      </p>
      <p>备案号：<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备15039074号-1</a></p>
    </div>
  </footer>
</template>

<script setup>
// import FooterIcon1 from '@/assets/images/footer/iconfont-csdn.png'
// import FooterIcon2 from '@/assets/images/footer/iconfont-github.png'
import FooterIcon1 from '@/assets/images/footer/iconfont-wechat.png'
import FooterIcon3 from '@/assets/images/footer/iconfont-email.png'
import jian from '@/assets/images/footer/jian.png'
import tools from '@/utils/tools'

const ProjectName = $const.PROJECT_NAME
const footerList = [
  { url: 'https://space.bilibili.com/82203246', icon: 'https://www.bilibili.com/favicon.ico?v=1', altName: '哔哩哔哩', isShow: true },
  { url: 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI3MjE0MjgwMg==#wechat_redirect', icon: FooterIcon1, altName: '读书的鱼儿', isShow: tools.isWechatEnv() },
  { url: 'https://www.jianshu.com/u/25ac403558ea', icon: jian, altName: '简书', isShow: true },
  { url: 'mailto:fx35792@163.com', icon: FooterIcon3, altName: 'email', isShow: true },
]
</script>

<style lang="scss" scoped>
#footer {
  width: 100%;
  padding: 10px 0px;
  background: #0059b2;
  color: #fff;
  p {
    text-align: center;
    &.friend {
      a {
        text-decoration: underline;
        margin-right: 10px;
      }
    }
  }
  a {
    color: #fff;
  }
}
.footer_img {
  width: auto;
  margin: 10px auto;
  text-align: center;
  a {
    display: inline-block;
    margin: 0px 5px;
  }
  :deep(.icon) {
    img {
      width: 31px;
      height: 31px;
      // background: #fff;
      // border-radius: 50%;
      border: none;
    }
  }
}
</style>